<script setup >
import 'aplayer/dist/APlayer.min.css';
import { useRouter } from 'vue-router';
import { ref, onMounted, nextTick } from 'vue';
import { blogMusicList } from '../data/music'

let APlayer;
let IsShow = ref(false);
let GlobalMusicList = [];

const SwitchStatus = () => {
  IsShow.value = !IsShow.value;
};

const CloseStatus = () => {
  if (IsShow.value) {
    IsShow.value = false;
  }
};

const InsertMenu = () => {
  const navCenterElm = document.querySelector('.vp-navbar-end');

  if (!navCenterElm) {
    return;
  }

  if (!document.querySelector('#MyMusic_Menu')) {
    const elm = document.createElement('div');
    elm.id = 'MyMusic_Menu';
    elm.classList.add('nav-item');
    elm.innerHTML = `<div id="MyMusic_icon" class="btnImg"></div>`; // spin="true"
    navCenterElm.appendChild(elm);
  }

  const Menu = document.querySelector('#MyMusic_Menu');
  Menu.onclick = (event) => {
    SwitchStatus();
    event.stopPropagation();
  };

  const MyMusicWrapper = document.querySelector('.MyMusic');
  MyMusicWrapper.onclick = (event) => {
    event.stopPropagation();
  };
};

const NewPlayer = () => {
  if (!APlayer) {
    return;
  }

  const Win = window;
  // 如果不存在盒子 则 终止
  const playElm = document.getElementById('GlobalAPlayer');

  if (!playElm) {
    return;
  }

  if (GlobalMusicList.length < 1) {
    return;
  }

  AddBtnSpin();

  // 判断是否被 APlayer 接管
  const playExist = playElm.classList.contains('aplayer');
  if (playExist) {
    return;
  }

  Win.GlobalAPlayer = new APlayer({
    container: document.getElementById('GlobalAPlayer'),
    audio: GlobalMusicList,
    lrcType: 3,
    listFolded: false,
    listMaxHeight: '324px',
    mini: false,
    fixed: false,
    volume: 1,
    storageName: 'GlobalAPlayer',
  });

  // 让按钮旋转
  Win.GlobalAPlayer.on('play', function () {
    console.log('让按钮旋转');
    AddBtnSpin();
  });
  Win.GlobalAPlayer.on('pause', function () {
    console.log('让按钮旋转暂停');
    AddBtnSpin();
  });
};

function AddBtnSpin() {
  const Win = window;
  console.log(Win.GlobalAPlayer, Win.GlobalAPlayer.mode);
  if (Win.GlobalAPlayer && Win.GlobalAPlayer.mode) {
    if (Win.GlobalAPlayer.paused) {
      document.getElementById('MyMusic_icon')?.setAttribute('spin', 'false');
    } else {
      document.getElementById('MyMusic_icon')?.setAttribute('spin', 'true');
    }
  }
}

// function StopMusic() {
//   const Win: any = window;
//   let toPath = window.location.pathname;

//   if (toPath.includes('/music/') && Win.GlobalAPlayer) {
//     Win.GlobalAPlayer.pause();
//   }
// }

onMounted(() => {
  const router = useRouter();

  GlobalMusicList = blogMusicList

  import('aplayer').then((res) => {
    nextTick(() => {
      APlayer = res.default;
      InsertMenu();
      NewPlayer();
      // 在这里插入全局事件监听
      window.document.body.onclick = () => {
        CloseStatus();
      };
    });

    router.beforeEach(() => {
      setTimeout(() => {
        InsertMenu();
        NewPlayer();
      }, 50);
      // setTimeout(() => {
      //   StopMusic();
      // }, 5000);
    });
  });
});
</script>

<template>
  <ClientOnly>
    <div class="MyMusic">
      <div class="MyMusic_Play" :class="{ hide: !IsShow }">
        <span class="close iconfont icon-guanbi" @click="CloseStatus">
        </span>
        <div id="GlobalAPlayer"></div>
      </div>
    </div>
  </ClientOnly>
</template>

<style lang="scss">
.MyMusic {
  position: fixed;
  right: 0.5rem;
  top: 0.5rem;
  z-index: 12;
  cursor: pointer;
  user-select: none;
}

.MyMusic_Play {
  background-color: #fff;
  user-select: none;
  position: fixed;
  width: 280px;
  height: 392px;
  top: 50%;
  right: 50%;
  margin-right: -140px;
  margin-top: -217px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

  transition: 0.3s;
  transform: scale(1);
  opacity: 1;

  &.hide {
    top: 6%;
    opacity: 0;
    transform: scale(0);
    visibility: hidden;
  }

  .aplayer {
    margin: 0;
  }

  .close {
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
    font-size: 18px;
    z-index: 11;
    border-radius: 50%;
    width: 24px;
    height: 24px;
  }
}

#MyMusic_Menu {
  top: 1px;
  user-select: none;
  cursor: pointer;
  opacity: 0.7;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-color);

  .icon {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
  }

  height: 1.6rem;
  width: 1.6rem;

  .btnImg {
    background-image: url('/img/playBtn.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }
}

[spin='true'] {
  animation: turn 5s linear infinite;
}

@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>
